<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:utils="http://java.sun.com/jsf/composite/utils"
      xmlns:p="http://primefaces.prime.com.tr/ui"
        >
<f:view locale="#{localizer.locale}" contentType="text/html"/>
<h:head>
    <link href="resources/styles/main.css" rel="stylesheet" type="text/css"/>
	<link href="resources/styles/reset.css" rel="stylesheet" type="text/css"/>
	<link href="resources/styles/style.css" rel="stylesheet" type="text/css"/>
    <h:outputScript library="primefaces" name="jquery/jquery.js"/>
    <script type="text/javascript" src="resources/js/commentValidator.js"/>
    <link href="resources/js/pirobox/css_pirobox/demo1/style.css" media="screen" title="shadow" rel="stylesheet"
          type="text/css"/>
    <script type="text/javascript" src="resources/js/pirobox/js/pirobox.min.js"/>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery().piroBox({
                my_speed: 400,
                bg_alpha: 0.3,
                slideShow : false,
                slideSpeed : 4,
                close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

            });
        });
    </script>
    <title>#{m.title_details}</title>
</h:head>

<h:body>
    <utils:menuComponent/>

    <!-- PRG pattern,make bookmarkable URL -->
    <f:metadata>
        <f:viewParam name="pname" value="#{showProducts.product.id}"/>
    </f:metadata>


        <div class="comment-container" id="tabbed-container">
		
		
		        <div class="product-name"><b>#{showProducts.product.name}</b></div>


        <div style="float:left;margin-top:20px;">
            <h:graphicImage value="#{showProducts.product.imgPath}"/>
        </div>


        <div class="delivery-note">
            #{m.quick_delivery}<br/>
            #{m.common_delivery}
        </div>


        <div class="buy-container">
            <h:form>
                <h:commandButton value="#{m.buy}" action="#{showProducts.buy}" class="button-order button-buy"/>
            </h:form>
        </div>
		
		
            <p:tabView>

                <p:tab title="#{m.description}">
                    <div id="description" class="tab_content">
						<span style="margin:5px 0 5px 0">
							<b>#{showProducts.product.name}</b>
						</span> <br/>
						
							#{showProducts.product.description}
						

                        <ul style="margin:5px 0 5px 5px">
                            <li>
                               #{m.length}:<b>#{showProducts.product.length}&nbsp;#{m.meter}.</b>
                            </li>
                            <li>
                               #{m.height}:<b>#{showProducts.product.height}&nbsp;#{m.meter}.</b>
                            </li>
                            <li>
                               #{m.weight}:<b>#{showProducts.product.weight}&nbsp;#{m.kilo}.</b>
                            </li>
                        </ul>

                        <ui:repeat var="gal" value="#{showProducts.gallery}">
                            <h:outputLink value="#{request.contextPath}#{gal.img}" class="pirobox_gall"
                                          title="#{showProducts.product.name}">
                                <h:graphicImage value="#{gal.thumb}" class="gallery-image"/>
                            </h:outputLink>
                        </ui:repeat>
                    </div>
                </p:tab>
                
                <p:tab title="#{m.video}" rendered="#{showProducts.product.videoUrl!=null}">
                        <object width="425" height="344">
       						 <param value="#{showProducts.product.videoUrl}" name="movie"/>
        					 <param value="true" name="allowFullScreen"/>
       						 <embed width="425" height="344" allowfullscreen="true" allowscriptaccess="always"
         						type="application/x-shockwave-flash" src="#{showProducts.product.videoUrl}"/>
        				</object>
                </p:tab>

                <p:tab title="#{m.comments}">

                    <ui:remove>
                        <h:form>
                            <p:messages showDetail="true"/>
                            <p:captcha label="Captcha" theme="white"/>
                            <p:commandButton value="Check" ajax="false" actionListener="#{showProducts.captchaSubmit}"/>
                        </h:form>
                    </ui:remove>


                    <div>

                        <table>
                            <tr>

                                <h:form onsubmit="return commValidator();" id="myForm" prependId="false">


                                    <span>#{m.of_comments}:<b><h:outputText value="#{showProducts.commentsCount}"
                                                                            id="commCount"/></b></span>



                                    <div class="order-info-container">
                                        <label for="name" style="float:left;">#{m.name} 
										<em style="color:#75A10D;">*</em></label>
                                        <h:inputText value="#{comment.commentator}" required="true" maxlength="30"
                                                     class="order-info comment-name"/>

                                        <div class="error commName"
                                             style="display:none;color:green;float:right;">#{m.blank_name}</div>
                                    </div>
                                    <div class="order-info-container">
                                        <label for="name" style="float:left;">#{m.review}<em
                                                style="color:#75A10D;">*</em></label>
                                        <h:inputTextarea value="#{comment.body}" required="true"
                                                         class="order-info comment-body">
                                            <f:validateLength maximum="2000"/>
                                        </h:inputTextarea>

                                        <div class="error commBody"
                                             style="display:none;color:green;float:right;">#{m.blank_comment}</div>
                                        <div class="error commBodySize"
                                             style="display:none;color:green;float:right;">#{m.comment_size}2000
                                        </div>
                                    </div>

                                    <p:commandButton value="#{m.send}" onclick="commentValidator()"
                                                     action="#{showProducts.addComment}" update="comms commCount"
                                                     styleClass="button-comment"/>

                                    <p:ajaxStatus style="width:16px;height:16px;">
                                        <f:facet name="start">
                                            <h:graphicImage value="resources/img/ajax-loader.gif"/>
                                        </f:facet>

                                        <f:facet name="complete">
                                            <h:outputText value=""/>
                                        </f:facet>
                                    </p:ajaxStatus>

									
									

                                    <div style="height:400px;overflow:auto;">


                                        <p:dataList id="comms" value="#{showProducts.comments}" var="com">
                                            <p:column>#{com.commentator}(
                                                <h:outputText value="#{com.postDate}">
                                                    <f:convertDateTime pattern="yyyy.dd.MM"/>
                                                </h:outputText>
                                                ):
                                            </p:column>
                                            <p:column>#{com.body}</p:column>
                                            <br/><br/>
                                        </p:dataList>
                                    </div>
									

                                </h:form>
                            </tr>


                        </table>

                    </div>

                </p:tab>

            </p:tabView>

    </div>

</h:body>

</html>